<style lang="scss" scoped>
    .mint-popup-right {
        width: 100%;
        height: 100%;
        z-index: 10000001!important;
        background: #FCFCFC;
    }
    .avatar {
        margin: .24rem .1rem;
    }
</style>

<template>
    <mt-popup
        v-model="visible"
        :modal="false"
        position="right">
        <mt-header fixed title="编辑水质信息">
            <mt-button icon="back" slot="left" @click="visible = false"></mt-button>
        </mt-header>
        <div class="base-info-area">
            <mt-field disableClear label="水温" placeholder="请输入水温" v-model="model.temperature"></mt-field>
            <mt-field disableClear label="PH值" placeholder="请输入PH值" v-model="model.phValue"></mt-field>
            <mt-field disableClear label="日平均换水率" placeholder="请输入日平均换水率"  v-model="model.exchangeRate"></mt-field>
        </div>
        <mt-header class="fixed-bt" title="确定"></mt-header>
        <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>  
    </mt-popup>
</template>

<script type="text/babel">

    export default {
        props: {
            value: Boolean
        },
        data() {
            return {
                visible: this.value,
                sheetVisible: false,
                actions: [],
                model: {
                    temperature: '26℃',
                    phValue: '7.0',
                    exchangeRate: '≥8.36%'
                }
            };  
        },       
        mounted() {
            this.actions = [
                {
                    name: "相册选择",
                    method: this.openAlbum
                }
            ]
        },
        watch: {
            value(current) {
                this.visible = current;
            },
            visible(current) {
                this.$emit('input', current)
            }
        },
        methods: {  
            // takePhoto() {
            //     console.log("taking photo")
            // },
            openAlbum() {
                $('#take-picture').click()
            },
            onFileChange(e) {
                upload(e, this)
            }
        },
    };
</script>